<@override name="content">
    <div id="app">
        <el-container v-loading="loading">
            <el-main>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="姓名：">
                        <el-input v-model.trim="queryData.name" size="mini" placeholder="请输入姓名" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="会员等级"  label-width="100px">
                        <el-select size="small" v-model="queryData.level" clearable placeholder="请选择会员等级" style="width: 100%">
                            <el-option v-for="item in levelList" :label="item.value"
                                       :key="item.key" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="佣金等级"  label-width="100px">
                        <el-select size="small" v-model="queryData.rebateType" clearable placeholder="请选择佣金等级" style="width: 100%">
                            <el-option v-for="item in rebateList" :label="item.value"
                                       :key="item.key" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="" class="itemTime">
                        <el-button type="primary" class="lastItem" size="mini" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="nickname"
                            label="昵称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="rebateMoney"
                            label="总佣金"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="账户余额"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="levelName"
                            label="会员等级"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="rebateTypeName"
                            label="佣金等级"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="parentName"
                            label="上级"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            label="创建时间"
                            width="180">
                        <template slot-scope="scope">{{ moment(scope.row.createAt).format('YYYY-MM-DD HH:mm:ss') }}</template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-link @click="onDetail(scope.row)" type="primary">修改</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageBox">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page.sync="queryData.pageNum" :page-sizes="[10, 20, 50, 100]"
                                   :page-size="queryData.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="count" background>
                    </el-pagination>
                </div>

            </el-main>

        </el-container>

        <el-dialog  :visible.sync="dialogVisible" width="80%">
            <el-descriptions :title="detailInfo.name" :column="3"  border v-if="detailInfo">
                <el-descriptions-item label="昵称">{{detailInfo.nickname}}</el-descriptions-item>
                <el-descriptions-item label="性别">
                    <el-tag size="small">{{detailInfo.gender==1?'男':'女'}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="生日">{{moment(detailInfo.birthday).format('YYYY-MM-DD HH:mm:ss')}}</el-descriptions-item>
                <el-descriptions-item label="总佣金">{{detailInfo.rebateMoney}}</el-descriptions-item>
                <el-descriptions-item label="用户余额">{{detailInfo.money}}</el-descriptions-item>
                <el-descriptions-item label="积分">{{detailInfo.point}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{detailInfo.mobile}}</el-descriptions-item>
                <el-descriptions-item label="证件类型">{{detailInfo.card}}</el-descriptions-item>
                <el-descriptions-item label="证件号码">{{detailInfo.cardNo}}</el-descriptions-item>
                <el-descriptions-item label="银行">{{detailInfo.bank}}</el-descriptions-item>
                <el-descriptions-item label="银行卡号">{{detailInfo.bankNo}}</el-descriptions-item>
                <el-descriptions-item label="银行网点">{{detailInfo.bankSite}}</el-descriptions-item>
                <el-descriptions-item label="最新下单">{{moment(detailInfo.orderTime).format('YYYY-MM-DD HH:mm:ss')}}</el-descriptions-item>
                <el-descriptions-item label="Email">{{detailInfo.email}}</el-descriptions-item>
                <el-descriptions-item label="地址">{{detailInfo.address}}</el-descriptions-item>
                <el-descriptions-item label="会员等级">
                    <el-select size="small" v-model="detailInfo.level" placeholder="请选择会员等级" style="width: 100%">
                        <el-option v-for="item in levelList" :label="item.value"
                                   :key="item.key" :value="item.key">
                        </el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="佣金等级">
                    <el-select size="small" v-model="detailInfo.rebateType" placeholder="请选择佣金等级" style="width: 100%">
                        <el-option v-for="item in rebateList" :label="item.value"
                                   :key="item.key" :value="item.key">
                        </el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="备注">{{detailInfo.remark}}</el-descriptions-item>
                <el-descriptions-item label="标签">
                    <el-tag size="small" v-for="item in customerTagsList" :type="item.tagType" style="margin-bottoms: 10px;margin-left: 10px">{{item.tagContent}} </el-tag>
                    <el-button size="mini" type="info" style="margin-left: 20px" @click="updateCustomerTags">修改</el-button>
                </el-descriptions-item>

            </el-descriptions>
            <div slot="footer" class="dialog-footer" v-if="detailInfo">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini"  type="primary" @click="onSure">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="设置标签"
                :visible.sync="dialogVisible2" width="80%"
        >
            <el-checkbox-group v-if="tagList.length>0" v-model="ids">
                <div style="display: flex;flex-wrap: wrap">
                    <template  v-for="item in tagList">
                        <el-checkbox  :label="item.id">{{item.content}}</el-checkbox>
                    </template>
                </div>

            </el-checkbox-group>

            <div slot="footer" class="dialog-footer" v-if="tagList.length>0">
                <el-button size="mini" @click="dialogVisible2 = false">取 消</el-button>
                <el-button size="mini"  type="primary" @click="onSure2">确 定</el-button>
            </div>
        </el-dialog>
    </div>
<script src="/res/js/page/customerPage.js"></script>
<style scoped>
    .item-w{
        width: 500px;
    }
    .pageBox {
        margin-top: 20px;
        text-align: right;
    }
</style>
</@override>

<!-- extends 一定要写在页面最下方 -->
<@extends name="_base.html"/>